.el-alert {
  padding: 8px 0;

  .el-alert__description {
    margin: 0 0;
    font-size: 14px;
  }
}

.el-tag--mini {
  line-height: 18px;
}

.el-button,
.el-input {
  font-weight: 400;
}

// table
.el-table {
  .caret-wrapper {
    height: 22px;
    margin-top: -2px;

    .sort-caret.ascending {
      top: 0;
    }

    .sort-caret.descending {
      bottom: 0;
    }
  }

  .el-table__cell {
    color: #4a4a4a;

    .cell {
      min-height: 22px;
      line-height: 22px;
    }
  }

  th.el-table__cell {
    padding: 8px 0;
    color: #4a4a4a;
    font-weight: 300;
    background: #eaeaea;

    &.is-leaf {
      border-block-width: 0;
    }
  }

  // .el-table__empty-block {
  //   min-height: 46px;

  //   .el-table__empty-text {
  //     height: 46px;
  //     line-height: 46px;
  //   }
  // }
  &.blank-background-header {
    th.el-table__cell {
      background: #fff;

      &.is-leaf {
        border-block-width: 1px;
      }
    }
  }
}

// common font style
.common-column {
  line-height: 22px;

  &:not(:last-child) {
    margin-bottom: 8px;
  }
}

// common font size and line-height
.common-font {
  font-size: 14px;
  line-height: 22px;
}

// form
@secondaryColor: #888888;
@primaryColor: #000;
@itemWidth: 400px;
@itemWeight: 300;
@formItemBottom: 8px;

// Form label validation icon
// You should add the label-icon class to the el-form-item component when you want to add an icon to the right of the label component
// primary-form secondary-form and secondary-label
.el-form {
  .el-form-item__label {
    position: relative;
    padding-right: 30px;
  }

  &.el-form--label-top .el-form-item__label {
    padding-right: 30px;
    padding-bottom: 0;
  }

  &.primary-form {
    .el-form-item__label {
      color: @primaryColor;
      font-weight: @itemWeight;
    }

    .item-title {
      color: @primaryColor;
      font-weight: @itemWeight;
      font-size: 14px;
      line-height: 28px;
    }
  }

  &.secondary-form {
    .el-form-item__label {
      color: @secondaryColor;
      font-weight: @itemWeight;
    }
  }

  .label-icon {
    .el-form-item__label {
      i {
        position: absolute;
        top: calc(~'50% - 7px');
        right: 8px;
        font-size: 14px;
      }
    }
  }

  .el-form-item[data-disabled] {
    .el-form-item__label {
      color: #a0a0a0;
    }
  }

  &.primary-form,
  &.secondary-form {
    .el-form-item {
      margin-bottom: @formItemBottom;

      &.secondary-label {
        .el-form-item__label {
          color: @secondaryColor;
        }
      }
    }

    .el-input,
    .el-select,
    .el-textarea {
      width: @itemWidth;
      max-width: calc(~'100% - 10px');

      .el-input {
        width: 100%;
        max-width: 100%;
      }
    }

    .el-input-number.el-input-number--mini {
      .el-input {
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label,
  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label {
    &::before {
      margin-right: 0;
      content: '';
    }

    &::after {
      position: absolute;
      top: calc(~'50% - 3px');
      right: 12px;
      width: 6px;
      height: 6px;
      background: #f00000;
      border-radius: 50%;
      content: '';
    }
  }

  .label-icon.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label,
  .label-icon.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label {
    &::after {
      background: transparent;
    }
  }
}

// common block and primary-title secondary-title
.common-parcel-block {
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 16px 40px;
  background-color: #fff;
  border-radius: 6px;

  .primary-title,
  .secondary-title {
    margin: 0 0 14px;
    font-weight: @itemWeight;
    font-size: 14px;
    line-height: 24px;

    &.not-first-child {
      margin-top: 24px;
    }
  }

  .primary-title {
    color: @primaryColor;
  }

  .secondary-title {
    color: @secondaryColor;
  }
}

.permission-disabled {
  cursor: not-allowed !important;

  &:hover,
  &:active,
  &:focus {
    cursor: not-allowed !important;
  }
}

i.permission-disabled,
span.permission-disabled {
  color: #c0c4cc !important;
  cursor: not-allowed !important;

  &:hover,
  &:active,
  &:focus {
    cursor: not-allowed;
  }
}

.permission-disabled:hover::after {
  display: inline-block;
  transform: translate(0, -50%);
  opacity: 0.8;
  transition: all 0.3s;
}

.el-button--text.permission-disabled,
.el-button--text.permission-disabled:focus,
.el-button--text.permission-disabled:hover {
  position: relative;
  color: #c0c4cc;
  background-image: none;
  border: none;
  cursor: not-allowed;
}

.el-button.permission-disabled,
.el-button.permission-disabled:focus,
.el-button.permission-disabled:hover {
  position: relative;
  color: #c0c4cc !important;
  background-color: transparent;
  background-image: none;
  border-color: #ebeef5 !important;
  cursor: not-allowed;
}

[tips]::after {
  /* 实现垂直居中 */
  position: absolute;
  top: -50%;
  left: 0%;
  z-index: 1000;
  display: none;
  padding: 4px 4px;
  color: #fff;
  font-size: 12px;

  /* 空白问题 */
  white-space: pre;
  background-color: rgba(18, 26, 44, 0.8);
  border-radius: 4px;
  box-shadow: 1px 1px 14px rgba(0, 0, 0, 0.1);
  transform: translate(0, -50%);
  opacity: 0;
  transition: all 0.3s;
  content: attr(tips);
}

[tips]:hover {
  /* ie兼容 */
  overflow: visible;
}

body {
  .cm-s-neo {
    .CodeMirror-linenumber {
      color: rgb(0, 108, 134);
    }

    .CodeMirror-gutters {
      background-color: #fff;
    }

    .CodeMirror-sizer {
      padding: 0 5px;
    }
  }
}
